<template>
  <div class="header">
    <div class="had">
      <el-row>
        <el-col :span="3"
          ><div class="logo">
            <img src="@/assets/logo.png" alt="" />
            <h4>网格化联动</h4>
          </div>
        </el-col>
        <el-col :span="13">
          <div class="icon">
            <i :class="icon" class="cion" @click="recovery"></i>
            &nbsp;
          </div>
        </el-col>
        <el-col :span="8">
          <div class="user">
            <div class="userimg">
              <img :src="url" alt="" />
            </div>
            <div class="username" style="color: #fff">
              <span>欢迎！&nbsp;{{ username }}</span>
            </div>
            <div class="operation">
              <el-button @click.native="exit" size="mini" type="danger">退出登录</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import api from '@/api/api'
export default {
  name: 'HeaDer',
  data() {
    return {
      url: '',
      username: '',
      icon: 'el-icon-s-fold',
    }
  },
  methods: {
    exit() {
      this.$confirm('即将要退出, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          api.exit().then(() => {
            this.$message({
              type: 'success',
              message: '退出成功!',
            })
            this.$router.push('/')
            localStorage.clear()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    recovery() {
      if (this.icon == 'el-icon-s-fold') {
        this.icon = 'el-icon-s-unfold'
        this.$parent.fatherMethod(1)
      } else if (this.icon == 'el-icon-s-unfold') {
        this.icon = 'el-icon-s-fold'
        this.$parent.fatherMethod(2)
      }
    },
  },
  created() {
    this.url = localStorage.getItem('avatar')
    this.username = localStorage.getItem('fullName')
  },
}
</script>

<style lang="scss" scoped>
.header {
  height: 5.3125rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  .had {
    box-sizing: border-box;
    width: 100%;
    height: 5.3125rem;
    line-height: 5.3125rem;
    text-align: center;
    position: fixed;
    background-color: #5ca5ea;
    z-index: 999;
    .icon {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .cion {
        color: #fff;
        font-size: 24px;
        cursor: pointer;
      }
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .el-row {
      height: 100%;
      .el-col-12 {
        height: 100%;
      }
    }
    .logo {
      display: flex;
      flex-direction: column;
      height: 5.3125rem;
      width: 14.9875rem;
      background-color: #5ca5ea;
      margin-right: 20px;
      box-sizing: border-box;
      img {
        margin: 0 auto;
        margin-top: 18px;
        height: 18px;
        width: 18px;
      }
      h4 {
        color: #fff;
        margin: 0;
        margin-top: -22px;
        font-weight: 400;
      }
    }
    .user {
      height: 100%;
      float: right;
      margin-right: 10.5rem;
      display: flex;
      flex-wrap: nowrap;
      .userimg {
        margin-top: 15px;
        img {
          border-radius: 50%;
          width: 50px;
          height: 50px;
          object-fit: cover;
          object-position: center;
        }
      }
      .username {
        margin-left: 20px;
      }
      .operation {
        margin-left: 30px;
      }
    }
  }
}
</style>
